﻿@model QBWeb.Models.CurriculumFolder.Curriculum

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br />
<p><a href="~/Home/Index">主页</a>> <a href="~/Curricula/Index">课程中心</a> >@Html.DisplayFor(model => model.CurriName)</p>

<div class="raw " style="margin-top:30px">
    <div class="col-md-12">
        <div class="layui-tab layui-tab-brief" lay-filter="teacherTab">
            <div id="curDetail">
                <span style="font-size: 28px">@Html.DisplayFor(model => model.CurriName)</span><br/>
                <span style="font-size: 20px">@ViewData["classInfo"]</span><br/><br />
                <span class="layui-icon layui-icon-friends">同学 @Html.DisplayFor(model => model.Menbers)</span><br />
                <span>加课码：@Html.DisplayFor(model => model.CurriCode)</span>
            </div>
            <ul class="layui-tab-title" style="background: rgb(241, 243, 244);">
                <li id="in0"  style="width: 10%">知识模块</li>
                <li id="in1" style="width: 10%">考试中心</li>
                @*<li id="in2" style="width: 10%">公告</li>
                <li id="in3" style="width: 10%">作业</li>*@
                <li id="in2" style="width: 10%">学生管理</li>
            </ul>

            <div class="layui-tab-content layui-show" style="background: white">
                加载中...
            </div>

        </div>

    </div>
</div>
<p style="text-align:right">
    @Html.ActionLink("返回", "Index", null, new { @class = "layui-btn layui-btn-normal" })
</p>



<script>
    var localData = window.localStorage;
    $(document).ready(function () { //首次加载页面0
        if (localData.hasOwnProperty("index")) {
            var index = parseInt(localData.getItem("index"));  
            $("#in" + index).attr("class", "layui-this");
            activeAjax(index);
            
        } else {
            $("#in0").attr("class", "layui-this");
            activeAjax(0);
           
        }

        
    });
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'layer'],
        function () {
            var element = layui.element, layer = layui.layer;
            
            element.on('tab(teacherTab)',
                function (ele) {
                    var a = ele.index;
                    localData.setItem("index", ele.index);
                    activeAjax(a);
                });
        });

    function activeAjax(index) {
        const loadingGif = `<p style="text-align: center">
                <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 40px; color: lightgray">&#xe63e;</i>
            </p>`;
        $(".layui-tab-content").empty();
        $(".layui-tab-content").append(loadingGif);
        $.ajax({
            type: "POST",
            url: "/Curricula/ReturnCard",
            data: { cardIndex: index },
            dataType: "HTML",
            success: function (data) {
                setTimeout(function() {
                    $(".layui-tab-content").empty();
                    $(".layui-tab-content").append(data);
                },300);
            }, error: function () {
                layer.msg("服务器连接失败");
                $(".layui-tab-content").empty();
            }
        });
    }
</script>